<template>
  <div class="min-h-screen bg-gray-50">
    <div class="main-container">
      <!-- 筛选区域 -->
      <div class="filter-section">
        <div class="filter-grid">
          <!-- 事务名称搜索框 -->
          <div class="search-container">
            <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <circle cx="11" cy="11" r="8"/>
              <path d="m21 21-4.35-4.35"/>
            </svg>
            <input
              type="text"
              placeholder="输入事务名称进行搜索"
              class="search-input"
              v-model="filters.name"
            />
          </div>

          <!-- 发布者搜索框 -->
          <div class="search-container">
            <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
              <circle cx="12" cy="7" r="4"/>
            </svg>
            <input
              type="text"
              placeholder="输入发布者/部门"
              class="search-input"
              v-model="filters.publisher"
            />
          </div>

          <!-- 状态筛选 -->
          <div class="select-container">
            <svg class="select-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <polygon points="22,3 2,3 10,12.46 10,19 14,21 14,12.46 22,3"/>
            </svg>
            <select class="filter-select" v-model="filters.status">
              <option value="">全部状态</option>
              <option value="待办">待办</option>
              <option value="未读">未读</option>
              <option value="已读">已读</option>
              <option value="处理中">处理中</option>
            </select>
          </div>

          <!-- 开始日期选择 -->
           <div class="date-filter-item">
            <svg class="calendar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                <line x1="16" y1="2" x2="16" y2="6"/>
                <line x1="8" y1="2" x2="8" y2="6"/>
                <line x1="3" y1="10" x2="21" y2="10"/>
            </svg>
            <input
                type="date"
                class="date-input"
                v-model="filters.date"
            />
             <button
                v-if="filters.date"
                @click="filters.date = ''"
                class="clear-btn"
              >
                清除
              </button>
           </div>
        </div>
      </div>

      <!-- 日志列表 -->
      <div class="table-container">
        <div class="table-wrapper">
          <table class="log-table">
            <thead class="table-header">
              <tr>
                <th class="table-th">序号</th>
                <th class="table-th">事务名称</th>
                <th class="table-th">类型/分组</th>
                <th class="table-th">状态</th>
                <th class="table-th">开始时间</th>
                <th class="table-th">截止时间</th>
                <th class="table-th">重要程度</th>
                <th class="table-th">操作</th>
              </tr>
            </thead>
            <tbody class="table-body">
              
              <tr v-for="(message, index) in paginatedTasks" :key="message.messageId" class="table-row">
                <td class="table-td">{{ indexOfFirstLog + index + 1 }}</td>
                
                <td class="table-td user-name">{{ message.title }}</td>
                
                <td class="table-td">{{ message.transactionType }}/{{message.groupId}}</td>
                <td class="table-td">
                  
                  <span :class="['status-badge', statusClasses[message.status]]">
                    {{ message.status }}
                  </span>
                </td>
                
                <td class="table-td">{{ message.startTime }}</td>
               
                <td class="table-td">{{ message.endTime }}</td>
                
                <td class="table-td">{{ message.importance }}</td>
                <td class="table-td action-buttons">
                    <button class="process-btn" title="处理" @click="showProcessModal(message)">
                      <svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" 
                      stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="9 11 12 14 22 4"></polyline>
                        <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
                      </svg>
                      处理
                    </button>
                    <button class="detail-btn" @click="showDetails(message)">
                      <svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                        <circle cx="12" cy="12" r="3"/>
                      </svg>
                      详情
                    </button>
                </td>
              </tr>
              <tr v-if="filteredTasks.length === 0">
                <td colspan="8" class="text-center-custom">暂无事务数据</td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 分页 -->
        <div class="pagination-container" v-if="filteredTasks.length > 0">
          <div class="pagination-mobile">
            <button
              @click="changePage(currentPage-1)"
              :disabled="currentPage === 1"
              class="pagination-btn"
            >
              上一页
            </button>
            <button
              @click="changePage(currentPage+1)"
              :disabled="currentPage === totalPages"
              class="pagination-btn"
            >
              下一页
            </button>
          </div>
          <div class="pagination-desktop">
            <div class="pagination-info">
              <p class="pagination-text">
                显示第 <span class="font-medium">{{ indexOfFirstLog + 1 }}</span> 到
                <span class="font-medium">{{ Math.min(indexOfLastLog, filteredTasks.length) }}</span> 条，
                共 <span class="font-medium">{{ filteredTasks.length }}</span> 条记录
              </p>
            </div>
            <div class="pagination-nav">
              <button
                @click="changePage(currentPage-1)"
                :disabled="currentPage === 1"
                class="pagination-btn-desktop pagination-btn-left"
              >
                上一页
              </button>
              <button
                v-for="page in totalPages"
                :key="page"
                @click="changePage(page)"
                :class="currentPage === page ? 'pagination-btn-desktop pagination-btn-active' : 'pagination-btn-desktop pagination-btn-normal'"
              >
                {{ page }}
              </button>
              <button
                @click="changePage(currentPage+1)"
                :disabled="currentPage === totalPages"
                class="pagination-btn-desktop pagination-btn-right"
              >
                下一页
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 详情弹窗 -->
    <div v-if="selectedTask" class="modal-overlay" @click="closeModal">
      <div class="modal-container" @click.stop>
        <div class="modal-content">
          <h3 class="modal-title">事务详情</h3>
          <div class="modal-body">
            <div class="detail-item">
              <label class="detail-label">事务名称</label>
              <p class="detail-value">{{ selectedTask.title }}</p>
            </div>
            <div class="detail-item">
              <label class="detail-label">发布者</label>
              <p class="detail-value">{{ selectedTask.senderName}}</p>
            </div>
            <div class="detail-item">
              <label class="detail-label">状态</label>
              <span :class="['status-badge', statusClasses[selectedTask.status]]">
                {{ selectedTask.status }}
              </span>
            </div>
            <div class="detail-item">
              <label class="detail-label">模板类型</label>
              <p class="detail-value">{{ selectedTask.templateType || '无' }}</p>
            </div>
            <div class="detail-item">
              <label class="detail-label">模板内容</label>
              <p class="detail-value">{{ selectedTask.templateContent || '无' }}</p>
            </div>
            <div class="detail-item">
              <label class="detail-label">附件</label>
              <button 
                v-if="selectedTask.fileName" 
                @click="previewFile(selectedTask.id)"
                class="modal-close-btn"
              >
                预览/下载
              </button>
              <!-- 只显示文件名 -->
              <p class="detail-value">{{ selectedTask.fileName || '无' }}</p>
            </div>
            <div class="detail-item">
              <label class="detail-label">excel文件</label>
              <button
              v-if="selectedTask.excelName"
              @click="previewExcelFile(selectedTask.id)"
              class="modal-close-btn"
              >
                预览/下载
              </button>
              <p class="detail-value">{{ selectedTask.excelName }}</p>
            </div>
            <div class="detail-item">
              <label class="detail-label">开始时间</label>
              <p class="detail-value">{{ selectedTask.startTime }}</p>
            </div>
            <div class="detail-item">
              <label class="detail-label">截止时间</label>
              <p class="detail-value">{{ selectedTask.endTime }}</p>
            </div>
          </div>
          <div class="modal-footer">
            <button @click="closeModal" class="modal-close-btn">
              关闭
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 处理弹窗 -->
    <!-- MODIFIED START -->
    <div v-if="taskToProcess" class="modal-overlay" @click="closeProcessModal">
      <div class="modal-container" @click.stop>
        <form @submit.prevent="submitProcess">
          <div class="modal-content">
            <h3 class="modal-title">处理事务</h3>
            <div class="modal-body">
              
              <!-- 显示基本信息 -->
              <div class="detail-item">
                <label class="detail-label">事务名称</label>
                <p class="detail-value">{{ taskToProcess.title }}</p>
              </div>

              <!-- 回复框 -->
              <div class="detail-item">
                <label for="reply" class="detail-label">回复内容</label>
                <textarea 
                  id="reply" 
                  rows="4" 
                  class="detail-value modal-textarea"
                  placeholder="请输入处理意见或回复..."
                  v-model="replyContent"
                ></textarea>
              </div>

              <!-- 添加附件 -->
              <div class="detail-item">
                <label class="detail-label">添加附件</label>
                <div class="detail-value file-input-wrapper">
                  <input 
                    type="file" 
                    id="attachment" 
                    class="file-input-hidden"
                    @change="handleFileChange"
                  >
                  <label for="attachment" class="file-input-label">选择文件</label>
                  <span class="file-name">{{ attachmentName || '未选择文件' }}</span>
                </div>
              </div>

            </div>
            <div class="modal-footer">
              <button type="button" @click="closeProcessModal" class="modal-close-btn">
                取消
              </button>
              <button type="submit" class="modal-submit-btn">
                提交
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, computed, reactive ,onMounted} from 'vue';

import { fetchExcelFile} from '@/services/api.js';
import { storeToRefs } from 'pinia';
import { useMatterStore } from '@/stores/Matter/Matter.js'; 
const matterStore = useMatterStore();

const { messages } = storeToRefs(matterStore);

const currentUserId = ref(null);

// 组件挂载后，调用 action 去获取后端数据
onMounted(() => {
  // 从 localStorage 中获取存储的用户信息字符串
  const userInfoString = localStorage.getItem('userInfo');


  if (userInfoString) {
    // 将 JSON 字符串解析回 JavaScript 对象
    const userInfo = JSON.parse(userInfoString);

    // 将获取到的 userId 赋值给 ref 变量
    currentUserId.value = userInfo.userId;

    // 检查 userId 是否有效，然后发起请求
    if (currentUserId.value) {
      matterStore.fetchMessages(currentUserId.value);
    } else {
      console.error("在 localStorage 中找到了 userInfo但缺少 userId！");
    }
  } else {
    // 处理用户未登录的情况
    console.error("未在 localStorage 中找到用户信息，用户可能未登录。");
  }
  console.log(currentUserId.value)
});

// 状态对应的CSS类名,map映射表
const statusClasses = {
  '待办': 'status-badge-pending',
  '未读': 'status-badge-unread',
  '已办': 'status-badge-done',
  '处理中': 'status-badge-inprogress',
};

//筛选条件对象
const filters = reactive({
  name: '',
  publisher: '',
  status: '',
  date: ''
});

//根据筛选条件动态过滤任务列表
const filteredTasks = computed(() => {
  return messages.value.filter(message => {

    const nameMatch = message.title.toLowerCase().includes(filters.name.toLowerCase());

    const publisherMatch = String(message.sendUserId).includes(filters.publisher);

    const statusMatch = !filters.status || message.status === filters.status;

    const dateMatch = !filters.date || (message.startTime && message.startTime.startsWith(filters.date));
    
    return nameMatch && publisherMatch && statusMatch && dateMatch;
  });
});

// --- 分页 ---
const currentPage = ref(1);
const itemsPerPage = 8;

const totalPages = computed(() => Math.ceil(filteredTasks.value.length / itemsPerPage));
const indexOfLastLog = computed(() => currentPage.value * itemsPerPage);
const indexOfFirstLog = computed(() => indexOfLastLog.value - itemsPerPage);

const paginatedTasks = computed(() => {
  // 当 filteredTasks 改变时，重置到第一页
  if (currentPage.value > totalPages.value) {
    currentPage.value = 1;
  }
  return filteredTasks.value.slice(indexOfFirstLog.value, indexOfLastLog.value);
});

function changePage(page) {
  if (page >= 1 && page <= totalPages.value) {
    currentPage.value = page;
  }
}

// --- 任务详情 ---
const selectedTask = ref(null);

async function showDetails(message) {
  console.log(message);
  console.log(message.messageId);
  try {
    
    const completeDetail = await matterStore.detail(message.messageId);
    
    selectedTask.value = completeDetail;

    console.log(selectedTask.value)

  } catch (error) {
    console.error("在组件中获取详情失败", error);
    alert('加载详情失败，请稍后重试！');
    // 获取失败后关闭弹窗
    closeModal();
  }
  try{
    if(message.status=='未读'){
    await matterStore.upStatus(message.messageId,'待办')
    matterStore.fetchMessages(currentUserId.value);
  }
  }catch(error){
    console.error(`更新消息状态失败 (Message ID: ${message.messageId})`, error);
  }
}
function closeModal() {
  selectedTask.value = null;
}

async function previewFile(messageId) {
  console.log("准备预览文件，Message ID:", messageId); // 1. 确认 messageId 是否正确
  try {
    const fileBlob = await matterStore.fetchFile(messageId);
    
    console.log("从后端获取到的 Blob 对象:", fileBlob); // 2. 检查返回的 Blob
    
    // 检查 Blob 是否有效
    if (!fileBlob || !(fileBlob instanceof Blob) || fileBlob.size === 0) {
        console.error("返回的不是有效的 Blob 或 Blob 为空");
        alert("文件不存在或已损坏。");
        return;
    }
    
    const fileURL = URL.createObjectURL(fileBlob);
    console.log("创建的临时 URL:", fileURL); // 3. 确认 URL 是否成功创建
    
    window.open(fileURL, '_blank');
  } catch (error) {
    // 4. 打印完整的错误对象，而不仅仅是弹窗
    console.error("在 previewFile 中捕获到完整错误:", error); 
    alert("预览文件失败，请检查文件是否存在。");
  }
}
async function previewExcelFile(messageId) {
  console.log("准备预览 Excel 文件，Message ID:", messageId);
  try {
    // 直接调用从 api.js 导入的函数
    const response = await fetchExcelFile(messageId);
    const fileBlob = response.data; // 文件 Blob 在 response.data 中

    console.log("从后端获取到的 Excel Blob 对象:", fileBlob);

    // 检查 Blob 是否有效
    if (!fileBlob || !(fileBlob instanceof Blob) || fileBlob.size === 0) {
        console.error("返回的不是有效的 Blob 或 Blob 为空");
        alert("Excel文件不存在或已损坏。");
        return;
    }

    const fileURL = URL.createObjectURL(fileBlob);
    console.log("为 Excel 文件创建的临时 URL:", fileURL);

    window.open(fileURL, '_blank');
  } catch (error) {
    console.error("在 previewExcelFile 中捕获到完整错误:", error);
    alert("预览 Excel 文件失败，请检查文件是否存在或联系管理员。");
  }
}
// --- 任务处理 ---
const taskToProcess = ref(null);
const replyContent = ref('');
const attachment = ref(null);
const attachmentName = ref('');

function showProcessModal(message) {
  // 重置表单状态，防止显示上一次的数据
  replyContent.value = '';
  attachment.value = null;
  attachmentName.value = '';
  taskToProcess.value = message;
  console.log(message)
}

function closeProcessModal() {
  taskToProcess.value = null;
  // 关闭时也重置表单
  replyContent.value = '';
  attachment.value = null;
  attachmentName.value = '';
}

function handleFileChange(event) {
  const file = event.target.files[0];
  if (file) {
    attachment.value = file;
    attachmentName.value = file.name;
  } else {
    attachment.value = null;
    attachmentName.value = '';
  }
}

async function submitProcess() {
  if (!taskToProcess.value) return;

  console.log("id"+taskToProcess.value.id);
  // 1. 从组件状态中收集所有需要的数据
  const recordData = {
    // a. 从正在处理的任务中获取 messageId
    messageId: taskToProcess.value.messageId, 
    // b. 假设当前登录用户的 ID。最好是从一个专门的用户 store 中获取
    processorUserId: currentUserId.value, 
    id:taskToProcess.value.id,
    // c. 从表单 v-model 中获取处理信息
    processInfo: replyContent.value,
    // d. 从表单 v-model 中获取文件对象
    attachmentFile: attachment.value 
  };
    // 2. 调用 store 的 action，并传递数据对象
  try {    
    const createdRecord = await matterStore.createRecord(recordData);

    // 3. 处理成功后的逻辑
    alert(`已成功提交对 "${taskToProcess.value.title}" 的处理！`);
    console.log("后端返回的新记录:", createdRecord);
    await matterStore.upStatus(taskToProcess.value.messageId,'已办')
    // a. 刷新列表以显示最新状态
    matterStore.fetchMessages(recordData.processorUserId);
    
    // b. 关闭弹窗
    closeProcessModal();

  } catch (error) {
    // 4. 处理失败后的逻辑
    console.error("在组件中捕获到提交错误:", error);
    // 从 error 对象中获取后端返回的错误信息来显示
    const errorMessage = error.response?.data || error.message || "提交失败，请重试";
    alert(errorMessage);
  }
  // 提交后关闭弹窗
  closeProcessModal();
}
</script>

<style scoped>
/* 基础样式 */
.min-h-screen { min-height: 100vh; }
.bg-gray-50 { background-color: #f9fafb; }

/* 主容器 */
.main-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem;
}

/* 筛选区域 */
.filter-section {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.search-container,
.select-container,
.date-filter-item {
  position: relative;
}

.search-icon, .select-icon, .calendar-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #9ca3af;
  z-index: 1;
}

.search-input, .filter-select {
  width: 100%;
  padding: 0.5rem 0.5rem 0.5rem 2.5rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.875rem;
  height: 38px; /* 统一高度 */
}
.date-input {
  width: 100%;
  padding: 0.5rem 0.5rem 0.5rem 2.5rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.875rem;
  height: 38px; /* 统一高度 */
}

.search-input:focus, .filter-select:focus, .date-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.clear-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.25rem 0.75rem;
  background-color: #f3f4f6;
  color: #6b7280;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background-color 0.2s;
}
.clear-btn:hover { background-color: #e5e7eb; }

/* 表格容器 */
.table-container {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.table-wrapper { overflow-x: auto; }
.log-table { width: 100%; border-collapse: collapse; }
.table-header { background-color: #f9fafb; }

.table-th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  color: #374151;
  font-size: 0.875rem;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}

.table-body { background-color: white; }
.table-row {
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.2s;
}
.table-row:hover { background-color: #f9fafb; }

.table-td {
  padding: 1rem;
  font-size: 0.875rem;
  color: #6b7280;
  vertical-align: middle;
}
.user-name { font-weight: 600; color: #111827; }

/* 自定义状态徽章 */
.status-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  display: inline-block;
}
.status-badge-pending { background-color: #fef9c3; color: #854d0e; } /* 黄色 - 待办 */
.status-badge-unread { background-color: #fee2e2; color: #991b1b; } /* 红色 - 未读 */
.status-badge-done { background-color: #dcfdf7; color: #065f46; } /* 绿色 - 已读 */
.status-badge-inprogress { background-color: #dbeafe; color: #1e40af; } /* 蓝色 - 进行中 */


.text-center-custom {
    text-align: center;
    padding: 2rem;
    color: #6b7280;
}

/* 操作按钮 */
.action-buttons {
    display: flex;
    gap: 0.5rem;
    white-space: nowrap;
}
.btn-icon { width: 14px; height: 14px; }

.process-btn, .detail-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
}
.detail-btn { background-color: #f3f4f6; color: #374151; }
.detail-btn:hover { background-color: #e5e7eb; border-color: #9ca3af; }

.process-btn { background-color: #dcfdf7; color: #065f46; border-color: #a7f3d0;}
.process-btn:hover { background-color: #a7f3d0; }

/* 分页样式 */
.pagination-container { padding: 1rem 1.5rem; border-top: 1px solid #e5e7eb; }
.pagination-mobile { display: flex; justify-content: space-between; gap: 1rem; }
.pagination-desktop { display: none; justify-content: space-between; align-items: center; }
.pagination-info { flex: 1; }
.pagination-text { font-size: 0.875rem; color: #6b7280; margin: 0; }
.font-medium { font-weight: 500; }
.pagination-nav { display: flex; align-items: center; gap: 0.25rem; }

.pagination-btn {
  padding: 0.5rem 1rem;
  background-color: white;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
}
.pagination-btn:hover:not(:disabled) { background-color: #f9fafb; }
.pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.pagination-btn-desktop {
  padding: 0.5rem 0.75rem;
  background-color: white;
  color: #374151;
  border: 1px solid #d1d5db;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 38px;
  text-align: center;
}
.pagination-btn-left { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.pagination-btn-right { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.pagination-btn-normal:hover { background-color: #f9fafb; }
.pagination-btn-active { background-color: #3b82f6; color: white; border-color: #3b82f6; }

/* 模态框样式 */
.modal-overlay {
  position: fixed; inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 50; padding: 1rem;
}
.modal-container {
  background-color: white; border-radius: 8px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  max-width: 600px; width: 100%;
  max-height: 90vh; overflow-y: auto;
}
.modal-content { padding: 1.5rem; }
.modal-title { font-size: 1.25rem; font-weight: 600; color: #111827; margin: 0 0 1.5rem 0; }
.modal-body { display: flex; flex-direction: column; gap: 1rem; }
.detail-item { display: flex; flex-direction: column; gap: 0.5rem; }
.detail-label { font-size: 0.875rem; font-weight: 600; color: #374151; margin: 0; }
.detail-value {
  font-size: 0.875rem; color: #6b7280; margin: 0;
  padding: 0.5rem 0.75rem; background-color: #f9fafb;
  border-radius: 4px; border: 1px solid #e5e7eb;
}
.modal-footer { margin-top: 1.5rem; display: flex; justify-content: flex-end; }
.modal-close-btn {
  padding: 0.5rem 1rem; background-color: #6b7280;
  color: white; border: none; border-radius: 6px;
  font-size: 0.875rem; cursor: pointer;
  transition: background-color 0.2s;
}
.modal-close-btn:hover { background-color: #4b5563; }

.modal-submit-btn {
  padding: 0.5rem 1rem; background-color: #3b82f6;
  color: white; border: none; border-radius: 6px;
  font-size: 0.875rem; cursor: pointer;
  transition: background-color 0.2s;
}
.modal-submit-btn:hover { background-color: #2563eb; }


.modal-textarea.detail-value {
  width: 100%;
  resize: vertical; /* 允许垂直调整大小 */
  min-height: 100px;
  color: #374151; /* 输入文字颜色 */
  box-sizing: border-box; /* 确保 padding 不会影响宽度 */
}
.modal-textarea.detail-value::placeholder {
  color: #9ca3af;
}
.modal-textarea.detail-value:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
  background-color: white;
}

/* 文件上传区域的容器，继承 detail-value 样式 */
.file-input-wrapper.detail-value {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.375rem 0.75rem; /* 微调内边距以适应按钮高度 */
  background-color: white; /* 覆盖detail-value的灰色背景，让它看起来更像一个输入框 */
}

/* 隐藏原生的文件选择框 */
.file-input-hidden {
  display: none;
}

/* 自定义的文件选择按钮 */
.file-input-label {
  padding: 0.25rem 0.75rem;
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background-color 0.2s;
  white-space: nowrap;
}
.file-input-label:hover {
  background-color: #e5e7eb;
}

/* 显示文件名的文本 */
.file-name {
  font-size: 0.875rem;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-grow: 1; /* 占据剩余空间 */
}

/* 响应式设计 */
@media (min-width: 768px) {
  .pagination-mobile { display: none; }
  .pagination-desktop { display: flex; }
}
@media (max-width: 768px) {
  .main-container { padding: 1rem; }
  .filter-grid { grid-template-columns: 1fr; }
}
</style>